<template>
  <div>
    <van-index-bar :index-list="indexList" highlight-color="#ff0000">
      <template v-for="item in datalist">
        <van-index-anchor :index="item.index" :key="item.index" />
        <van-cell v-for="subitem in item.data" :title="subitem.name" />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);

import { cityData } from "../../api/api";

export default {
  data() {
    return {
      datalist: [],
      indexList: ["A", "B"],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let ret = await cityData();
      this.datalist = ret[0];
      this.indexList = ret[1];
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
